/* 通用样式 */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif; /* 设置全局字体 */
}

header {
    background-color: #f5f5f5; /* 设置头部背景颜色 */
    padding: 5px 0; /* 设置头部内边距 */
    position: relative; /* 使头部相对于其正常位置定位 */
}

.top-nav {
    position: absolute; /* 绝对定位导航栏 */
    top: 0; /* 顶部对齐 */
    right: 0; /* 右侧对齐 */
    padding: 5px; /* 设置内边距 */
}

.push-right a {
    text-decoration: none; /* 移除链接下划线 */
    color: #333; /* 设置链接文字颜色 */
    margin-left: 5px; /* 设置链接之间的间距 */
}

.push-right a:hover {
    color: #007bff; /* 设置链接悬停时的颜色 */
}

/* 导航栏基本样式 */
#mainNav {
    list-style: none; /* 移除列表项标记 */
    margin: 0; /* 移除外边距 */
    padding: 0; /* 移除内边距 */
    background-color: #f5f5f5; /* 设置导航栏背景颜色 */
    text-align: center; /* 文字居中对齐 */
}

#mainNav li {
    display: inline-block; /* 使列表项水平排列 */
    position: relative; /* 使列表项相对于其正常位置定位 */
}

#mainNav a {
    display: block; /* 使链接块级显示 */
    text-decoration: none; /* 移除链接下划线 */
    color: #333; /* 设置链接文字颜色 */
    padding: 8px 20px; /* 设置链接内边距 */
    font-size: 20px; /* 设置链接字体大小 */
}

#mainNav a:hover {
    background-color: #ddd; /* 设置链接悬停时的背景颜色 */
}

/* 下拉菜单样式 */
.sub-menu {
    display: none; /* 默认隐藏下拉菜单 */
    position: absolute; /* 绝对定位下拉菜单 */
    top: 100%; /* 使下拉菜单位于父元素下方 */
    left: 0; /* 左侧对齐 */
    min-width: 100%; /* 设置最小宽度 */
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* 添加阴影效果 */
    z-index: 999; /* 设置堆叠顺序 */
    background-color: white; /* 设置背景颜色 */
}

#mainNav .dropdown:hover .sub-menu {
    display: block; /* 当鼠标悬停在父元素上时显示下拉菜单 */
}

.sub-menu a {
    display: block; /* 使链接块级显示 */
    background-color: white; /* 设置背景颜色 */
    padding: 10px 20px; /* 设置内边距 */
    text-align: left; /* 文字左对齐 */
}

.sub-menu a:hover {
    background-color: #ddd; /* 设置链接悬停时的背景颜色 */
}

/* 内容部分 */

/* 轮播图 */
.carousel ul {
    display: flex; /* 使用 Flexbox 布局 */
    list-style: none; /* 移除列表项标记 */
    padding: 0; /* 移除默认的内边距 */
    margin: 0; /* 移除默认的外边距 */
}

.carousel li {
    flex: 1; /* 让每个<li>元素均分可用空间 */
    max-width: 25%; /* 确保每个图片占据最多25%的空间 */
    padding: 0 5px; /* 设置图片之间的间距 */
}

.carousel img {
    display: block; /* 防止底部有额外空白 */
    width: 100%; /* 图片宽度设为100%，适应<li>的宽度 */
    height: auto; /* 保持图片比例 */
}

/* 新闻通知 */
/* More Link */
section.news .more-link {
    display: block; /* 使链接块级显示 */
    text-align: right; /* 文字右对齐 */
    margin-top: 20px; /* 设置顶部外边距 */
    font-size: 20px; /* 设置链接字体大小 */
    color: #007bff; /* 设置链接文字颜色 */
    text-decoration: none; /* 移除链接下划线 */
}
section.news .more-link::after {
    content: '▶'; /* 在链接后添加一个箭头符号 */
    margin-left: 5px; /* 设置箭头符号与链接之间的间距 */
}
/* Section Styling */
section.news {
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 垂直排列子元素 */
    gap: 20px; /* 子元素之间的间距 */
    padding: 20px; /* 设置内边距 */
}
/* Heading */
section.news h2 {
    font-size: 30px; /* 设置标题字体大小 */
    margin-bottom: 20px; /* 设置标题底部外边距 */
    font-weight: bold; /* 加粗标题 */
}

/* News Container */
section.news .news-container {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 水平分布子元素 */
    gap: 20px; /* 子元素之间的间距 */
}

/* Image News Items */
section.news .image-news-items {
    flex: 1; /* 使图片新闻项目占据剩余空间 */
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 垂直排列子元素 */
    gap: 20px; /* 子元素之间的间距 */
}

section.news .image-news-items .news-item figure {
    position: relative; /* 使图片相对定位 */
}

section.news .image-news-items .news-item img {
    width: 80%; /* 图片宽度设为80% */
    height: auto; /* 保持图片比例 */
}

section.news .image-news-items .news-item figcaption {
    position: absolute; /* 绝对定位标题 */
    bottom: 0; /* 底部对齐 */
    left: 0; /* 左侧对齐 */
    width: 80%; /* 宽度设为80% */
    background: rgba(0, 0, 0, 0.5); /* 设置半透明黑色背景 */
    color: white; /* 设置文字颜色 */
    padding: 10px; /* 设置内边距 */
}

section.news .image-news-items .news-item .news-date {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 水平分布子元素 */
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 10px; /* 设置底部外边距 */
}

section.news .image-news-items .news-item .news-date span {
    font-size: 35px; /* 设置日期字体大小 */
    font-weight: bold; /* 加粗日期 */
}

section.news .image-news-items .news-item .news-date span:nth-child(2) {
    font-size: 25px; /* 设置月份字体大小 */
    text-transform: uppercase; /* 将月份转换为大写 */
}

section.news .image-news-items .news-item h3 {
    margin: 0; /* 移除标题外边距 */
    font-size: 18px; /* 设置标题字体大小 */
}

/* Text News Items */
section.news .text-news-items {
    flex: 1; /* 使文本新闻项目占据剩余空间 */
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 垂直排列子元素 */
    gap: 100px; /* 子元素之间的间距 */
}

section.news .text-news-items .news-item article {
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 垂直排列子元素 */
    gap: 25px; /* 子元素之间的间距 */
}

section.news .text-news-items .news-item .news-date {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 水平分布子元素 */
    align-items: center; /* 垂直居中对齐 */
}

section.news .text-news-items .news-item .news-date span {
    font-size: 30px; /* 设置日期字体大小 */
    font-weight: bold; /* 加粗日期 */
}

section.news .text-news-items .news-item h3 {
    margin: 0; /* 移除标题外边距 */
    font-size: 30px; /* 设置标题字体大小 */
}

/* 通知公告 */
section.inform {
    margin: 30px;
}

/* 设置标题下方的外边距 */
section.inform h2 {
    font-size: 40px;;
    font-weight: bold; /* 加粗标题 */
    margin-bottom: 30px;
}

/* 使用 Flexbox 布局，并允许子元素换行，设置项之间的间距 */
section.inform .announcements {
    display: flex; /* 使用 Flexbox 布局 */
    flex-wrap: wrap; /* 允许子元素换行 */
    gap: 40px; /* 设置项之间的间距 */
}

/* 每个通知项的样式 */
section.inform .announcements li {
    display: flex; /* 使用 Flexbox 布局 */
    flex: 0 0 calc(50% - 20px); /* 每个项占据50%宽度，并减去间距 */
    background-color: #f0f0f0; /* 设置背景颜色 */
    border-radius: 8px; /* 设置圆角 */
    overflow: hidden; /* 防止内容溢出 */
}

/* 日期部分的样式 */
section.inform .announcements li .date {
    background-color: #d9d9d9; /* 设置背景颜色 */
    color: #333; /* 设置文字颜色 */
    padding: 20px; /* 设置内边距 */
    font-size: 30px; /* 设置字体大小 */
    font-weight: bold; /* 加粗文字 */
    width: 80px; /* 设置固定宽度 */
    text-align: center; /* 文字居中对齐 */
}

/* 链接部分的样式 */
section.inform .announcements li a {
    display: flex; /* 使用 Flexbox 布局 */
    flex: 1; /* 占据剩余空间 */
    padding: 20px; /* 设置内边距 */
    color: #333; /* 设置文字颜色 */
    text-decoration: none; /* 移除下划线 */
    font-size: 23px; /* 设置字体大小 */
    line-height: 1.5; /* 设置行高 */
}

/* 鼠标悬停时链接的背景颜色 */
section.inform .announcements li a:hover {
    background-color: #e0e0e0; /* 设置背景颜色 */
}

/* 更多链接的样式 */
section.inform .more-link {
    display: block; /* 使链接块级显示 */
    text-align: right; /* 文字右对齐 */
    margin-top: 20px; /* 设置顶部外边距 */
    font-size: 16px; /* 设置字体大小 */
    color: #007bff; /* 设置文字颜色 */
    text-decoration: none; /* 移除下划线 */
}

/* 鼠标悬停时更多链接的下划线 */
section.inform .more-link:hover {
    text-decoration: underline; /* 添加下划线 */
}

/* 页面底部 */
footer {
    background-color: blue; /* 设置底部背景颜色 */
    color: white; /* 设置文字颜色 */
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 垂直排列子元素 */
    justify-content: space-between; /* 垂直分布子元素 */
    padding: 20px; /* 设置内边距 */
}

footer section {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-around; /* 水平均匀分布子元素 */
}

footer article, footer nav, footer aside {
    text-align: left; /* 文字左对齐 */
}

footer address {
    font-style: normal; /* 如果你希望地址的字体风格保持正常 */
}

footer a {
    color: white; /* 设置链接文字颜色 */
    text-decoration: none; /* 移除链接下划线 */
}

footer img {
    width: 100px; /* 设置图片宽度 */
    height: auto; /* 保持图片比例 */
}

footer hr {
    border: 0; /* 移除默认边框 */
    border-top: 1px solid white; /* 设置顶部边框 */
    margin: 15px 0; /* 设置边框上下外边距 */
}

footer p:last-child {
    text-align: center; /* 版权信息居中显示 */
}